<template>
  <div
    class="website-menu"
    :style="menuStyle"
  >
    <el-link
      v-for="menuItem in props.menuData"
      :key="menuItem.menuName"
      class="website-menu__item"
      :underline="false"
      :style="menuItemStyle"
      @click="handleMenu(menuItem)"
    >
      {{ $t(menuItem.menuName) }}
    </el-link>
  </div>
</template>

<script setup>
import { defineComponent } from 'vue'

// 使用特殊的编译宏来指定组件的名称
defineComponent({
	name: 'WebsiteMenu'
})

const props = defineProps({
	menuData: {
		type: Array,
		default: () => [],
		validator: (value) => {
			// 验证数组的每个元素是否符合预期的对象结构
			return value.every((item) => {
				return (
					typeof item === 'object' &&
					item !== null &&
					typeof item.menuName === 'string' &&
					typeof item.menuHref === 'string'
				)
			})
		}
	},
	menuItemStyle: {
		type: Object,
		default: () => ({})
	},
	menuStyle: {
		type: Object,
		default: () => ({})
	},
	hoverColor: {
		type: String,
		default: '#cd3e2d'
	}
})

const emits = defineEmits(['handleMenu']);
const handleMenu = (item)=>{
  emits('handleMenu',item)
}
</script>

<style scoped lang="scss">
.website-menu {
	display: flex;
	justify-content: space-between;
	width: 100%;
	min-height: 30px;
	font-weight: 400;
	background-color: transparent;
	.website-menu__item {
		font-size: 18px;
		color: #797979;
	}
	.website-menu__item:hover {
		color: v-bind('props.hoverColor');
	}
  a {
    text-decoration: unset;
  }
}
</style>
